import RightFixed from '@/layouts/RightFixed';
import TopBread from '@/layouts/TopBread';
import { selectWriteById } from '@/services/write';
import { getQueryParams } from '@/utils/utils';
import { Tooltip } from 'antd';
import moment from 'moment';
import { useCallback, useEffect, useState } from 'react';
import { history } from 'umi';
import styles from './index.less';

const Advice: React.FC = () => {
  const { lastRoute, id }: any = history?.location?.query;
  const qs = getQueryParams();
  const [color, setColor] = useState<string>(localStorage.getItem('color') || '#1a7721');
  const [advice, setAdvice] = useState<any>({
    title: '',
    timeadd: '',
    detail: '',
  });

  const select = useCallback(async () => {
    try {
      await selectWriteById({ id: id }).then((res) => {
        setAdvice(res[0]);
      });
    } catch (error) {
      console.log(error);
    }
  }, [id]);

  useEffect(() => {
    select();
  }, [select]);

  return (
    <div className={styles.container}>
      <TopBread lastRoute={lastRoute} now={'文章详情'} setColorParent={setColor} />
      <div className={styles.content}>
        <div className={styles.inContent}>
          <div
            className={styles.topDiv}
            style={{
              borderTop: ` ${color} 3px solid`,
              fontSize: 18,
            }}
          >
            {qs.role !== '3' ? (
              <div className={styles.topText}>{advice.title}</div>
            ) : (
              <Tooltip
                title={`${advice.id}`}
                overlayInnerStyle={{ width: 380, height: 40, fontSize: 16, paddingLeft: 30 }}
              >
                <div className={styles.topText}>{advice.title}</div>
              </Tooltip>
            )}
            <div
              onClick={() => {
                history.push({
                  pathname: '/advice',
                  query: { lastRoute: '文章详情' },
                });
              }}
              style={{ cursor: 'pointer', fontSize: 15 }}
            >
              <img
                src={require('@/assets/images/返回.svg')}
                className={styles.img}
                alt={'加载失败'}
              />
              返回文章列表
            </div>
          </div>
          <div className={styles.info}>
            <div>作者： 四季养生购物网站</div>
            <div style={{ marginLeft: 18 }}>
              发表于：{moment(Number(advice.timeadd)).format('YYYY-MM-DD HH:mm:ss')}
            </div>
          </div>
          <div className={styles.text} dangerouslySetInnerHTML={{ __html: advice.detail }} />
        </div>
      </div>
      <RightFixed color={color} thisRoute={'养生小专栏'} />
    </div>
  );
};
export default Advice;
